<template>
  <nut-row>
    <nut-col :span="12" class="device-detail">
      <div class="name">{{ device.name }}</div>
      <div class="space">
        {{ device.spaceName }}
        <nut-tag v-if="device.online" type="success">在线</nut-tag>
        <nut-tag v-else color="#E9E9E9" textColor="#999999">离线</nut-tag>
      </div>
    </nut-col>
    <nut-col :span="12">
      <img style="width: 80px; height: 60px" :src="device.picUrl" />
      <nut-button
        style="margin: 0 0 20px 20px"
        size="mini"
        icon="more-x"
        @click="opMenuVisible = !opMenuVisible"
      ></nut-button>
    </nut-col>
  </nut-row>
  <nut-actionsheet
    v-model:visible="opMenuVisible"
    :menu-items="menuItems"
    @choose="chooseItem"
    title="操作"
  >
  </nut-actionsheet>
  <nut-tabs v-model="state.tab1value">
    <nut-tabpane title="设备控制" class="device-control">
      <nut-cell-group v-if="isSwitcher">
        <nut-cell title="开关状态">
          <template v-slot:link>
            <nut-switch
              v-model="powerstate"
              @change="powerstateChange"
              active-text="开"
              inactive-text="关"
            />
          </template>
        </nut-cell>
      </nut-cell-group>
      <nut-empty v-else description="该设备无控制功能"></nut-empty>
    </nut-tabpane>
    <nut-tabpane title="设备详情">
      <nut-form>
        <nut-form-item label="品类">{{ device.categoryName }}</nut-form-item>
        <nut-form-item label="产品">{{ device.productName }} </nut-form-item>
        <nut-form-item label="设备ID">{{ device.deviceId }} </nut-form-item>
        <nut-form-item label="MAC"> {{ device.deviceName }} </nut-form-item>
      </nut-form>
    </nut-tabpane>
  </nut-tabs>

  <nut-popup
    pop-class="popclass"
    v-model:visible="showEditDeviceDialog"
    :z-index="100"
  >
    <h2>修改设备名称</h2>
    <nut-form v-model="editDeviceForm">
      <nut-form-item label="所在房间" label-width="80px">
        {{ editDeviceForm.spaceName }}
      </nut-form-item>
      <nut-form-item label="设备命名" label-width="80px">
        <input
          class="nut-input-text"
          v-model="editDeviceForm.name"
          placeholder="给设备指定个名字吧"
          type="text"
        />
      </nut-form-item>
      <nut-row style="margin-top: 10px; text-align: center">
        <nut-col :span="12">
          <nut-button type="primary" size="small" @click="saveEditDevice"
            >保存</nut-button
          >
        </nut-col>
        <nut-col :span="12">
          <nut-button size="small" @click="showEditDeviceDialog = false"
            >取消</nut-button
          >
        </nut-col>
      </nut-row>
    </nut-form>
  </nut-popup>
</template>

<script>
import Taro, { getCurrentPages } from "@tarojs/taro";
import { reactive, toRefs, ref, computed } from "vue";
import httpService from "../../services/httpService";

export default {
  name: "Index",
  components: {},
  mounted() {},
  unmounted() {
    httpService.removePullDevice("detail", null);
  },
  setup() {
    const state = reactive({});
    const params = Taro.getCurrentInstance().router.params;
    const opMenuVisible = ref(false);
    const showEditDeviceDialog = ref(false);
    const editDeviceForm = ref({ id: "", name: "", spaceName: "" });
    const menuItems = [
      {
        name: "修改",
      },
      {
        name: "删除",
      },
    ];
    function chooseItem(item, index) {
      if (index == 0) {
        showEditDeviceDialog.value = true;
      } else if (index == 1) {
        removeDevice();
      }
    }

    function saveEditDevice() {
      httpService
        .post("/space/saveDevice", { params: editDeviceForm.value })
        .then((res) => {
          if (res.statusCode == 200) {
            showEditDeviceDialog.value = false;
            getDeviceInfo();
          }
        });
    }

    function removeDevice() {
      httpService
        .delete("/space/removeDevice?deviceId=" + device.value.deviceId)
        .then((res) => {
          if (res.statusCode == 200) {
            Taro.navigateBack();
          }
        });
    }

    const device = ref({});
    function getDeviceInfo() {
      httpService.get("/space/device/" + params.deviceId).then((res) => {
        if (res.statusCode == 200) {
          let data = res.data;
          device.value = data;
          editDeviceForm.value.id = data.id;
          editDeviceForm.value.spaceId = data.spaceId;
          editDeviceForm.value.name = data.name;
          editDeviceForm.value.spaceName = data.spaceName;

          httpService.removePullDevice("detail", null);
          httpService.addPullDevice("detail", data.deviceId);
          httpService.pullDeviceInfo("detail", device.value);
        }
      });
    }
    getDeviceInfo();

    const switchs = ["switch", "SmartPlug", "fan", "light"];
    const isSwitcher = computed(() => {
      return switchs.findIndex((s) => s == device.value.category) >= 0;
    });
    const powerstate = computed({
      get: () => device.value.property.powerstate == 1,
      set: (val) => (device.value.property.powerstate = val ? 1 : 0),
    });

    function powerstateChange(val) {
      httpService
        .post("/device/" + device.value.deviceId + "/service/property/set", {
          data: { powerstate: val ? 1 : 0 },
        })
        .then((res) => {});
    }

    return {
      state,
      device,
      opMenuVisible,
      showEditDeviceDialog,
      menuItems,
      chooseItem,
      editDeviceForm,
      saveEditDevice,
      isSwitcher,
      powerstate,
      powerstateChange,
    };
  },
};
</script>

<style lang="scss">
.device-detail {
  padding: 0 10px;
  text-align: center;
  .name {
    font-size: 18px;
  }
  .space {
    color: #999;
  }
}
.device-control {
  color: #999;
}
.popclass {
  width: 100%;
  padding: 10px 10px;
  text-align: center;
}
</style>
